<template>
	<van-swipe :autoplay="3000" lazy-render>
		<van-swipe-item v-for="image in images" :key="image">
			<img :src="image.pic" />
		</van-swipe-item>
	</van-swipe>
</template>

<script>
	import {
		getBanners
	} from '@/api/home.js'
	import {
		ref,
		onMounted
	} from 'vue'

	export default {
		setup() {
			const images = ref([]);
			
			onMounted(async () => {
				const {data: res} = await getBanners()
				images.value = res.banners 
			})

			return {
				images
			}
		}
	}
</script>

<style lang="less" scoped>
	.van-swipe {
		width: 100%;
		height: 3rem;

		.van-swipe-item {
			padding: 0 0.2rem;

			img {
				width: 100%;
				height: 100%;
				border-radius: 0.2rem;
			}
		}

		/deep/ .van-swipe__indicator--active {
			background-color: rgb(219, 130, 130);
		}
	}
</style>
